.box-homepage {
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-template-rows:  20% 60% 20% 20%; /* nav fixed 400px, blurb flexible */
    gap: 20px;                        /* space between nav and blurb */
    max-width: 1200px;                /* optional max width */
    margin: 0 auto; 
    overflow: hidden;                /* center grid on page */
}
body {
    background-image: url("../images/banner6.jpg");
    background-size: cover;
    animation: backgroundScroll 10s linear infinite alternate; /* Apply the animation */
    margin: 90px 90px 90px 90px;
}

/* navigation bar */
nav {
    width: 100%;                       /* fills nav column */
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;           /* vertical center links inside nav */
    align-items: center;               /* horizontal center links inside nav */
    background-image: url("../images/doily.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 90%;
}
nav a {
    text-decoration: none;
    font-family: 'early2000s', sans-serif;
    color: black;
    font-size: 20px;
    margin: 10px 0;                    /* space between links */
}
nav a:hover {
    color: rgba(141, 137, 137, 0.87);
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white; /* Add a glowing effect */
}
/* cover for title */


/* header section */
header {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}
header h1 {
    text-align: center;
    letter-spacing: 10px;
}
.jump-text span {
  /* Ensure spans can be moved vertically */
  display: inline-block;
  /* Apply the animation */
  animation-name: jump;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; /* or '1 forwards' if you want it to happen only once */
}

/* Stagger the animation delay for each letter */
.jump-text span:nth-child(1) { animation-delay: 0.1s; }
.jump-text span:nth-child(2) { animation-delay: 0.2s; }
.jump-text span:nth-child(3) { animation-delay: 0.3s; }
.jump-text span:nth-child(4) { animation-delay: 0.4s; }
.jump-text span:nth-child(5) { animation-delay: 0.5s; }
.jump-text span:nth-child(6) { animation-delay: 0.6s; }
.jump-text span:nth-child(7) { animation-delay: 0.7s; }
.jump-text span:nth-child(8) { animation-delay: 0.8s; }
.jump-text span:nth-child(9) { animation-delay: 0.9s; }
.jump-text span:nth-child(10) { animation-delay: 1.0s; }
.jump-text span:nth-child(11) { animation-delay: 1.1s; }
/* Continue for all letters */

/* Define the jumping animation */
@keyframes jump {
  0%, 100% {
    /* At the start and end of the animation, the letter is at its normal position */
    transform: translateY(0);
  }
  50% {
    /* At the midpoint, the letter is moved upwards */
    transform: translateY(-15px); /* Adjust the jump height as needed */
  }
}
header img{
    display: block;
    margin: 10px 900px 10px 10px;
}
.textured-texts {
  background: url('../images/chrome.jpg') repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#img-header {
    width: 100%;
    image-rendering: pixelated;
    height: auto;
}

@font-face {
    font-family: 'early2000s';
    src: url('../fonts/Golden-Girdle.otf') format('truetype');
}

@font-face {
    font-family: 'pixel';
    src: url('../fonts/BlockCraft.otf') format('truetype');
}

h1 {
  font-family: 'early2000s', sans-serif;
  color: rgb(199, 120, 192);
}

/*intro CHANGE LATER*/
section {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    justify-content: bottom;
}

#cat {
    display: flex;
    flex-direction: column;
    margin-bottom: 900px;
    margin-right: 10%;
}
#blurb {
    display: flex;
    justify-content: center;
    align-items: center;
}
#onion {
    display: flex;
    flex-direction: row;
    background-image: url("../images/onion2.gif");
    background-repeat: no-repeat;
    background-size: 500px 500px;
    justify-content: left;
}
.note {
    width: 600px;           /* FIXED size */
    height: 400px;          /* FIXED size */
    background-image: url("../images/notes.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;          /* allows centering */
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 40px;
    box-sizing: border-box;
}

.note p {
    max-width: 80%;
    margin: 0;
    font-family: 'pixel', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: rgb(31, 31, 31);
}

.typing span {
  opacity: 0;
  display: inline-block;
  margin-right: 6px;
  animation: showWord 0.3s forwards;
}
/* stagger each word */
.typing span:nth-child(1) { animation-delay: 0.2s; }
.typing span:nth-child(2) { animation-delay: 0.4s; }
.typing span:nth-child(3) { animation-delay: 0.6s; }
.typing span:nth-child(4) { animation-delay: 0.8s; }
.typing span:nth-child(5) { animation-delay: 1s; }
.typing span:nth-child(6)  { animation-delay: 1.2s; }
.typing span:nth-child(7)  { animation-delay: 1.4s; }
.typing span:nth-child(8)  { animation-delay: 1.6s; }
.typing span:nth-child(9)  { animation-delay: 1.8s; }
.typing span:nth-child(10) { animation-delay: 2s; }
.typing span:nth-child(11) { animation-delay: 2.2s; }
.typing span:nth-child(12) { animation-delay: 2.4s; }
.typing span:nth-child(13) { animation-delay: 2.6s; }
.typing span:nth-child(14) { animation-delay: 2.8s; }
.typing span:nth-child(15) { animation-delay: 3s; }
.typing span:nth-child(16) { animation-delay: 3.2s; }
.typing span:nth-child(17) { animation-delay: 3.4s; }
.typing span:nth-child(18) { animation-delay: 3.6s; }
/* continue pattern... */

@keyframes showWord {
  to {
    opacity: 1;
  }
}
footer {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}
div, header, footer, aside, nav, h1, p, lb {
    border: 1px solid black;
}